<script setup lang="ts">
/**
 * 用户个人信息 -- 游戏相关的信息
 */
import {userInfoStore} from "~/stores/userInfoStore";
import FromItemPlus from "~/components/constant/fromItemPlus.vue";
import {getUserInfo, receiveNewGift, saveInvitationUser} from "~/api/userApi";
import {successCode} from "~/api/base/http";
import {useRouter} from "#vue-router";
import {error, success} from "~/utils/myMessage";
import FormItem from "~/components/constant/formItem.vue";
import MySelect from "~/components/constant/mySelect.vue";
import {getMapList} from "~/api/mapApi";

const emits = defineEmits(["update"]);

function update() {
  emits("update");
}

onMounted(() => {
  initInvitationUser();
  initAddress()
})

function initInvitationUser() {
  if (userInfoStore().loginUser.invitationUserId && !userInfoStore().loginUser.invitationUser) {
    getUserInfo(userInfoStore().loginUser.invitationUserId).then((res) => {
      if (res.code === successCode) {
        userInfoStore().loginUser.invitationUser = res.data;
      }
    })
  }
}

const eosIdShow = ref(false)
const steamIdShow = ref(false)
const router = useRouter()

function moveTo() {
  router.push("/profile/" + userInfoStore().loginUser.invitationUserId);
}


const receiveGiftShow = ref(false);
const addressId = ref("");
const addressSelect = ref([]);
const receiveBtnDis = ref(false);
function receiveGift() {
  receiveBtnDis.value = true;
  receiveNewGift(addressId.value).then(res => {
    receiveBtnDis.value = false;
    receiveGiftShow.value = false;
    if (res.code === successCode) {
      userInfoStore().loginUser.isGet = "1";
      success(res.message);
    }else {
      error(res.message);
    }
  })
}

function initAddress() {
  if (userInfoStore().loginUser.isGet === "1") {
    return;
  }
  getMapList(1, 99999, "", "", "").then(res => {
    if (res.code === successCode) {
      addressSelect.value = constantStore().listToSelect(res.data.content, "name", "id");
    }
  })
}

const invitationUserCode = ref("");

function invitation() {
  saveInvitationUser(invitationUserCode.value).then((res) => {
    if (res.code === successCode) {
      userInfoStore().loginUser.invitationUserId = res.data;
      initInvitationUser();
      success(res.message);
    } else {
      error(res.message);
    }
  })
}
</script>

<template>
  <div class="user-game-info-box">
    <div class="game-top">
    </div>
    <div class="game-content">
      <div class="content-title">
        游戏账户信息
      </div>
      <div class="content">
        <el-form label-width="auto" style="max-width: 600px">
          <el-form-item label="EOSID">
            <span class="icon iconfont icon-zhuyi" @click="eosIdShow = true"/>
            <from-item-plus v-model="userInfoStore().loginUser.gameId" @update="update"/>
          </el-form-item>
          <el-form-item label="方舟游戏名">
            <from-item-plus v-model="userInfoStore().loginUser.gameName" @update="update"/>
          </el-form-item>
          <el-form-item label="SteamID">
            <span class="icon iconfont icon-zhuyi" @click="steamIdShow = true"/>
            <from-item-plus v-model="userInfoStore().loginUser.steamId" @update="update"/>
          </el-form-item>
          <el-form-item label="我的邀请码">
            <from-item-plus v-model="userInfoStore().loginUser.invitationCode" @update="update" :can-edit="false"/>
          </el-form-item>
          <el-form-item :label="userInfoStore().loginUser.invitationUser?'邀请人':'填写邀请码'">
            <div v-if="userInfoStore().loginUser.invitationUser" class="invitation-user" @click="moveTo">
              {{ userInfoStore().loginUser.invitationUser.name }}
            </div>
            <from-item-plus v-else v-model="invitationUserCode" @update="invitation"/>
          </el-form-item>
          <el-form-item label="领取新人奖励">
            <div v-if="userInfoStore().loginUser.isGet === '1'" class="invitation-user">
              <el-tag type="success" size="small">已领取</el-tag>
            </div>
            <div v-else>
              <el-button type="primary" @click="receiveGiftShow = true">领 取</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="game-dialog">
      <div class="EosId-dialog">
        <el-dialog v-model="receiveGiftShow" title="选择地图" width="500">
          <div class="">
            <form-item title="发货地址" :required="true">
              <my-select v-model="addressId" :option="addressSelect" placeholder="请选择发货地址"/>
            </form-item>
          </div>
          <template #footer>
            <el-button @click="receiveGiftShow = false">取 消</el-button>
            <el-button type="primary" @click="receiveGift" :disabled="receiveBtnDis">确 定</el-button>
          </template>
        </el-dialog>
        <el-dialog v-model="eosIdShow">
          <div class="opus-module-content" style="display:flex;flex-direction:column;align-items:center;padding: 3rem">
            <div style="font-size:17px;">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              玩家都有一个独一无二的steam id，服务器添加插件靠的是steam id来识别你本人的steam账号。
              但是，在重制版方舟·飞升中，由于代码改动，steam id不再适用，而是使用了eos id，那么跟着我的方法来获取eos id吧！
            </div>
            <div style="font-size:17px;text-align: center;margin: 1rem 0;font-weight: bolder">第一步</div>
            <div style="font-size:17px;margin: 1rem 0;">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              打开你的steam，对着游戏【方舟飞升】点击【右键】，点击【管理】，再点击【浏览本地文件】。
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              <img src="@/assets/image/tutorial/eosId/img.png"/>
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              点击之后会打开一个文件夹，就像下面这样。
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              <img src="@/assets/image/tutorial/eosId/img_1.png"/>
            </div>
            <div style="font-size:17px;text-align: center;margin: 1rem 0;font-weight: bolder">第二部</div>
            <div style="font-size:17px;margin: 1rem 0;">
              我们根据目录，依次打开
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              【ShooterGame】&nbsp;→ 【Saved 】&nbsp;→ 【PersistentDownloadDir】&nbsp;→【EOSCache】&nbsp;→
              【datastorage】，下面两个文件夹任意打开一个。
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              <img src="@/assets/image/tutorial/eosId/img_5.png"/>
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              这个时候就会出现一个这样的文件夹
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              <img src="@/assets/image/tutorial/eosId/img_2.png"/>
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              双击打开它，就会得看到一个000开头的文件夹。
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              <img src="@/assets/image/tutorial/eosId/img_3.png"/>
            </div>
            <div style="font-size:17px;text-align: center;margin: 1rem 0;font-weight: bolder">第三步</div>
            <div style="font-size:17px;margin: 1rem 0;">
              这串字符就是你在方舟飞升中的eos id了，将它复制下来，可以粘贴发送给需要使用的人
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              <img src="@/assets/image/tutorial/eosId/img_4.png"/>
            </div>
          </div>
        </el-dialog>
        <el-dialog v-model="steamIdShow">
          <div class="opus-module-content" style="display:flex;flex-direction:column;align-items:center;padding: 3rem">
            <div style="font-size:17px;">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              玩家都有一个独一无二的steam id，服务器添加插件靠的是steam id来识别你本人的steam账号。
              获取steam id 总结2种方法
            </div>
            <div style="font-size:17px;text-align: center;margin: 1rem 0;font-weight: bolder">第一种</div>
            <div style="font-size:17px;margin: 1rem 0;">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              点击账户明细
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              <img src="@/assets/image/tutorial/steamId/img.png"/>
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              <img src="@/assets/image/tutorial/steamId/img_2.png"/>
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              7656*************这个就是steamID了
            </div>
            <div style="font-size:17px;text-align: center;margin: 1rem 0;font-weight: bolder">第二种</div>
            <div style="font-size:17px;margin: 1rem 0;">
              点击查看我的个人资料
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              <img src="@/assets/image/tutorial/steamId/img_2.png"/>
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              任意位置右键，点击复制网页URL
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              <img src="@/assets/image/tutorial/steamId/img_3.png"/>
            </div>
            <div style="font-size:17px;margin: 1rem 0;">
              然后会得到一串https://steamcommunity.com/profiles/7656*************/
              里面的数字就是steamID了。
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

.user-game-info-box {
  .game-top {
    width: 100%;
    height: 15rem;
    display: flex;
    background-color: var(--item-bgc);

  }

  .game-content {
    margin-top: 1rem;
    background-color: var(--item-bgc);

    .content-title {
      padding: 1rem 2rem;
      font-size: 1.2rem;
      font-weight: bolder;
      border-bottom: solid .1rem var(--body-bgc);
    }

    .content {
      padding: 2rem 1.5rem;

      .icon {
        position: absolute;
        left: -.6rem;
        top: -.06rem;
        user-select: none;
        cursor: pointer;
      }

      .icon:hover {
        color: #409EFF;
      }

      .invitation-user {
        padding: 0 1rem;
        cursor: pointer;
        user-select: none;
      }

      .invitation-user:hover {

        text-decoration: underline;
        color: #409EFF;
      }
    }
  }
}
</style>